<template>
    <div class="intelligenceService">
        <x-header :left-options="{showBack: true,backText:'智能客服'}" class="headerBox"></x-header>
        <div class='serviceTitle'>
            <img src='../assets/images/assistance07.png'/>
            <div class='ml_20'>
                <div class='serviceName'>智能客服-润禾教育</div>
                <div class='greetings'>客服润禾教育欢迎来撩哦~</div>
            </div>
        </div>
        <div class='chats clearfix'>
            <div class='left'>亲，小包猜你想咨询一下问题？你也可以描述你的问题，小包来帮你解答。</div>
            <div class='right'>如何申请退款？</div>
        </div>
    </div>
</template>

<script>
    import { XHeader } from "vux";
    export default {
        components: {
            XHeader,
        },
    }
</script>

<style lang="less" scoped>
.intelligenceService{
    /deep/.headerBox {
    background-color: #fff;
    border-bottom: 1px solid #eee;
    .vux-header-left {
      left: 24px;
      .vux-header-back {
        color: #000;
      }
      .left-arrow:before {
        border-color: #000;
      }
    }
    .vux-header-title {
      color: #000;
      font-size: 30px;
    }
  }
  .serviceTitle{
        background: #fff;
        padding: 30px;
        display: flex;
        img{
            width: 100px;
            height: 100px;
            vertical-align: middle;
        }
        .ml_20{
            margin-left: 20px;
            .serviceName{
                font-size: 32px;
                color: #0088FF;
            }
            .greetings{
                font-size: 22px;
                color: #666;
                margin-top:10px;
            }
        }
    }

    .chats{
        border-top: 2px solid #eee;
        padding:30px;
        .left{
            background:#08f;
            color:#fff;
            font-size:28px;
            padding:10px;
            border-radius:10px;
            max-width:80%;
            margin-left:10px;
            margin-bottom: 20px;
            float: left;
            position: relative;
            clear: both;
            &::before{
                content: "";
                width: 0;
                height: 0;
                border-top: 10px solid transparent;
                border-bottom: 10px solid transparent;
                border-right: 10px solid #08f;
                position: absolute;
                top: 10px;
                left: -10px;
            }
        }
        .right{
            background: #eee;
            color: #333;
            font-size: 28px;
            padding:10px;
            border-radius:10px;
            max-width:80%;
            margin-right: 10px;
            margin-bottom: 20px;
            float: right;
            position: relative;
            clear: both;
            &::before{
                content: "";
                width: 0;
                height: 0;
                border-top: 10px solid transparent;
                border-bottom: 10px solid transparent;
                border-left: 10px solid #eee;
                position: absolute;
                top: 10px;
                right: -10px;
            }
        }
    }
       
}
</style>